<template>
  <div class="container is-scroll-bar">
    <div class="main-content is-scroll-bar">
      <div class="header-container">
        <div class="title">企业注册信息</div>
      </div>
      <div class="main">
        <div class="item-content">
          <!-- 营业信息填报 -->
          <div class="form-content">
            <div class="item-header">
              <div class="subheading">企业信息填报</div>
            </div>
            <el-form
              :model="businessForm"
              :rules="businessRules"
              ref="businessForm"
              label-width="15em"
            >
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="用户名：" prop="username">
                    <el-input
                      placeholder="请输入用户名"
                      v-model="businessForm.username"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="密码：" prop="password">
                    <el-input
                      placeholder="请输入密码"
                      v-model="businessForm.password"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="企业名称：" prop="enterpriseName">
                    <el-input
                      placeholder="请输入企业名称"
                      v-model="businessForm.enterpriseName"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="所属行业：">
                    <el-input
                      placeholder="请输入所属行业"
                      v-model="businessForm.industry"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="所属类别：">
                    <el-input
                      placeholder="请输入所属类别"
                      v-model="businessForm.type"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="联系人电话：" prop="phone">
                    <el-input
                      placeholder="请输入联系人电话"
                      v-model="businessForm.phone"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="经营范围：">
                    <el-input
                      placeholder="请输入经营范围"
                      v-model="businessForm.businessScope"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="单位地址：" prop="address">
                    <el-input
                      placeholder="请输入单位地址"
                      v-model="businessForm.address"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="营业执照统一社会信用代码："
                    prop="socialCreditCode"
                  >
                    <el-input
                      placeholder="请输入营业执照信用代码"
                      v-model="businessForm.socialCreditCode"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="上传营业执照扫描件："
                    prop="businessLicense"
                  >
                    <div style="display: flex; align-items: center">
                      <el-upload
                        :on-remove="handleRemove"
                        :limit="1"
                        style="display: flex"
                        :on-success="handleSuccess"
                        action="/api/upload"
                        list-type="picture-card"
                        v-model="businessForm.businessLicense"
                      >
                        <div
                          style="
                            position: absolute;
                            width: 148px;
                            height: 148px;
                          "
                          @click="uploadType = '1'"
                        >
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                      </el-upload>
                      <label style="margin-left: 10px"
                        >有效期到期前提前 6 个月提醒</label
                      >
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="form-content">
            <div class="item-header">
              <div class="subheading">更多信息填写</div>
            </div>
          </div>
          <el-collapse accordion>
            <el-collapse-item title="采矿信息填报" name="1">
              <!-- 采矿信息填报 -->
              <div class="form-content">
                <div class="item-header">
                  <div class="subheading">采矿信息填报</div>
                </div>
                <el-form
                  :model="miningForm"
                  :rules="miningFormRules"
                  ref="ruleForm"
                  label-width="200px"
                >
                  <el-row :gutter="0">
                    <el-col :span="6">
                      <el-form-item
                        label="采矿许可证证号："
                        prop="miningLicenseNumber"
                      >
                        <el-input
                          placeholder="请输入采矿许可证证号"
                          v-model="miningForm.miningLicenseNumber"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="开采矿种：" prop="miningSpecies">
                        <el-input
                          placeholder="请输入开采矿种"
                          v-model="miningForm.miningSpecies"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="开采方式：" prop="miningMethod">
                        <el-input
                          placeholder="请输入开采方式"
                          v-model="miningForm.miningMethod"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="生产规模：" prop="productionScale">
                        <el-input
                          placeholder="请输入生产规模"
                          v-model="miningForm.productionScale"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="矿区面积：" prop="miningArea">
                        <el-input
                          placeholder="请输入矿区面积"
                          v-model="miningForm.miningArea"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="最高开采标高："
                        prop="maximumMiningElevation"
                      >
                        <el-input
                          placeholder="请输入最高开采标高"
                          v-model="miningForm.maximumMiningElevation"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="最低开采标高："
                        prop="minimumMiningElevation"
                      >
                        <el-input
                          placeholder="请输入最低开采标高"
                          v-model="miningForm.minimumMiningElevation"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="有效期：" prop="validityPeriod">
                        <el-date-picker
                          type="daterange"
                          class="item-filter-width"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          v-model="miningForm.validityPeriod"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label="上传采矿许可证扫描件："
                        prop="miningLicense"
                      >
                        <div style="display: flex; align-items: center">
                          <el-upload
                            list-type="picture-card"
                            :on-remove="handleRemove"
                            :limit="1"
                            style="display: flex"
                            :on-success="handleSuccess"
                            action="/api/upload"
                          >
                            <div
                              style="
                                position: absolute;
                                width: 148px;
                                height: 148px;
                              "
                              @click="uploadType = '2'"
                            >
                              <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                          </el-upload>
                          <label style="margin-left: 10px"
                            >有效期到期前提前 6 个月提醒</label
                          >
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
            <el-collapse-item title="安全生产许可信息填报" name="2">
              <!-- 安全生产许可信息填报 -->
              <div class="form-content">
                <div class="item-header">
                  <div class="subheading">安全生产许可信息填报</div>
                </div>
                <el-form
                  :model="safetyProductionForm"
                  :rules="safetyProductionRules"
                  ref="ruleForm"
                  label-width="200px"
                >
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item
                        label="安全生产许可证证号："
                        prop="safetyProductionNumber"
                      >
                        <el-input
                          placeholder="请输入安全生产许可证证号"
                          v-model="safetyProductionForm.safetyProductionNumber"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="6">
                      <el-form-item
                        label="主要负责人姓名："
                        prop="principalName"
                      >
                        <el-input
                          placeholder="请输入主要负责人姓名"
                          v-model="safetyProductionForm.principalName"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="主要负责人联系电话："
                        prop="principalNumber"
                      >
                        <el-input
                          placeholder="请输入主要负责人联系电话"
                          v-model="safetyProductionForm.principalNumber"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="许可范围：" prop="scopePermission">
                        <el-input
                          placeholder="请输入许可范围"
                          v-model="safetyProductionForm.scopePermission"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="生产规模：" prop="productionScale">
                        <el-input
                          placeholder="请输入生产规模"
                          v-model="safetyProductionForm.productionScale"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="有效期：" prop="validityPeriod">
                        <el-date-picker
                          type="daterange"
                          class="item-filter-width"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          v-model="safetyProductionForm.validityPeriod"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label="上传安全生产许可证扫描件："
                        prop="phone"
                      >
                        <div style="display: flex; align-items: center">
                          <el-upload
                            :on-remove="handleRemove"
                            :limit="1"
                            style="display: flex"
                            :on-success="handleSuccess"
                            action="/api/upload"
                            list-type="picture-card"
                          >
                            <div
                              style="
                                position: absolute;
                                width: 148px;
                                height: 148px;
                              "
                              @click="uploadType = '3'"
                            >
                              <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                          </el-upload>
                          <label style="margin-left: 10px"
                            >有效期到期前提前 4 个月提醒</label
                          >
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
            <el-collapse-item title="安全生产标准信息填报" name="3">
              <!-- 安全生产标准信息填报 -->
              <div class="form-content">
                <div class="item-header">
                  <div class="subheading">安全生产标准信息填报</div>
                </div>
                <el-form
                  :model="safetyStandardsForm"
                  :rules="safetyStandardsRules"
                  ref="ruleForm"
                  label-width="230px"
                >
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item
                        label="安全生产标准化证书编号："
                        prop="safetyStandardNumber"
                      >
                        <el-input
                          placeholder="请输入安全生产标准化证书编号"
                          v-model="safetyStandardsForm.safetyStandardNumber"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="安全生产标准化等级："
                        prop="safetyLevel"
                      >
                        <el-input
                          placeholder="请输入安全生产标准化等级"
                          v-model="safetyStandardsForm.safetyLevel"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="有效期：" prop="validityPeriod">
                        <el-date-picker
                          v-model="safetyStandardsForm.validityPeriod"
                          type="daterange"
                          class="item-filter-width"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="发证日期：" prop="dateIssue">
                        <el-date-picker
                          v-model="safetyStandardsForm.dateIssue"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-ddTHH:mm:ss.SSS"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24"> </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label="上传安全生产标准化证书扫描件："
                        prop="phone"
                      >
                        <el-upload
                          :on-remove="handleRemove"
                          :limit="1"
                          style="display: flex"
                          :on-success="handleSuccess"
                          action="/api/upload"
                          list-type="picture-card"
                        >
                          <div
                            style="
                              position: absolute;
                              width: 148px;
                              height: 148px;
                            "
                            @click="uploadType = '4'"
                          >
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                          </div>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
            <el-collapse-item title="安全生产标准化证书信息填报" name="4">
              <div class="form-content" style="margin-bottom: 50px">
                <div class="item-header">
                  <div class="subheading">安全生产标准化证书</div>
                  <div>
                    <el-button
                      type="success"
                      size="small"
                      @click="safetyStandardsVisible = true"
                      >新增</el-button
                    >
                  </div>
                </div>
                <!-- 表格展示 -->
                <el-table
                  stripe
                  :data="safetyTableData"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    prop="certificateName"
                    label="证书名称"
                    width="180"
                  >
                    <!-- {{ tableData.certificateName }} -->
                  </el-table-column>
                  <el-table-column
                    prop="licenseIssuingAuthority"
                    label="发证机关"
                    width="180"
                  >
                    <!-- {{ tableData.licenseIssuingAuthority }} -->
                  </el-table-column>
                  <el-table-column
                    prop="certificateLinks"
                    label="上传证书扫描件链接"
                  >
                    <template #default="{ row }">
                      <a :href="row.certificateLinks" target="_blank">{{
                        row.certificateLinks
                      }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="备注">
                    <!-- {{tableData.remarks}} -->
                  </el-table-column>
                  <el-table-column width="180" label="操作">
                    <template slot-scope="scope">
                      <el-popconfirm
                        style="margin-right: 10px"
                        title="确定删除吗？"
                        @confirm="deleteSafetyRow(scope.$index)"
                      >
                        <el-button slot="reference" type="danger" size="large"
                          >删除</el-button
                        >
                      </el-popconfirm>
                      <el-button
                        type="primary"
                        size="large"
                        @click="editSafetyRow(scope.$index)"
                        >编辑</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item title="“三同时”相关资料及第三方资料" name="5">
              <!-- “三同时”相关资料及第三方资料 -->
              <div class="form-content">
                <div class="item-header">
                  <div class="subheading">“三同时”相关资料及第三方资料</div>
                  <div>
                    <el-button
                      type="success"
                      size="small"
                      @click="InformationVisible = true"
                      >新增</el-button
                    >
                  </div>
                </div>
                <el-table
                  :data="InformationTableData"
                  border
                  style="width: 100%"
                  :key="InformationTableData.length"
                >
                  <el-table-column
                    prop="reportName"
                    label="报告名称"
                    width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="unitEstablishment"
                    label="编制单位"
                    width="180"
                  ></el-table-column>
                  <el-table-column prop="reviewLink" label="专家评审链接">
                    <template #default="{ row }">
                      <a :href="row.reviewLink" target="_blank">{{
                        row.reviewLink
                      }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="approvalLink" label="审批文件链接">
                    <template #default="{ row }">
                      <a :href="row.approvalLink" target="_blank">{{
                        row.approvalLink
                      }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="textLinks" label="文本链接 ">
                    <template #default="{ row }">
                      <a :href="row.textLinks" target="_blank">{{
                        row.textLinks
                      }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="备注" />
                  <el-table-column width="180" label="操作">
                    <template slot-scope="scope">
                      <el-popconfirm
                        style="margin-right: 10px"
                        title="确定删除吗？"
                        @confirm="deleteInformationRow(scope.$index)"
                      >
                        <el-button slot="reference" type="danger" size="large"
                          >删除</el-button
                        >
                      </el-popconfirm>

                      <el-button
                        type="primary"
                        size="large"
                        @click="editInformationRow(scope.$index)"
                        >编辑</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div class="dialog-action-bar">
            <el-button type="success" size="large" @click="register()"
              >立即注册</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!--safetyStandardsDialog  -->
    <el-dialog
      title="安全生产标准化证书信息填写"
      :visible.sync="safetyStandardsVisible"
      width="50%"
      center
    >
      <el-form
        :model="safetyStandardsDialogForm"
        :rules="safetyStandardsDialogRules"
        ref="ruleForm"
        label-width="200px"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="证书名称：" prop="certificateName">
              <el-input
                placeholder="请输入证书名称"
                v-model="safetyStandardsDialogForm.certificateName"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发证机关" prop="licenseIssuingAuthority">
              <el-input
                placeholder="请输入发证机关"
                v-model="safetyStandardsDialogForm.licenseIssuingAuthority"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书扫描件链接" prop="certificateName">
              <el-input
                placeholder="请输入证书扫描件链接"
                v-model="safetyStandardsDialogForm.certificateLinks"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注：" prop="remarks">
              <el-input
                placeholder="请输入备注信息"
                type="textarea"
                :rows="5"
                v-model="safetyStandardsDialogForm.remarks"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSecurity()">确 定</el-button>
        <el-button @click="safetyStandardsVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- thirdPartyInformationDialog -->
    <el-dialog
      title="“三同时”相关资料及第三方资料信息填写"
      :visible.sync="InformationVisible"
      width="50%"
      center
    >
      <el-form
        :model="InformationDialogForm"
        :rules="InformationDialogRules"
        ref="ruleForm"
        label-width="auto"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="报告名称" prop="reportName">
              <el-input
                placeholder="请输入报告名称"
                v-model="InformationDialogForm.reportName"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制单位" prop="unitEstablishment">
              <el-input
                placeholder="请输入编制单位"
                v-model="InformationDialogForm.unitEstablishment"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专家评审链接" prop="reviewLink">
              <el-input
                placeholder="请输入专家评审链接"
                v-model="InformationDialogForm.reviewLink"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批文件链接" prop="approvalLink">
              <el-input
                placeholder="请输入审批文件链接"
                v-model="InformationDialogForm.approvalLink"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文本链接" prop="textLinks">
              <el-input
                placeholder="请输入文本链接"
                v-model="InformationDialogForm.textLinks"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remarks">
              <el-input
                placeholder="请输入备注"
                type="textarea"
                :rows="5"
                v-model="InformationDialogForm.remarks"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitInformation()">确 定</el-button>
        <el-button @click="InformationVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  businessInformation,
  miningInformation,
  safetyProductionInformation,
  safetyStandardsInformation,
  safetyCertificateInformation,
  thirdPartyInformation,
} from "@/api/enterprise";
export default {
  name: "registerA",
  data() {
    return {
      //上传的是谁的
      uploadType: "",
      uploadUrl: "",
      showbox: true,
      //“三同时”相关资料及第三方资料表
      InformationDialogForm: {
        reportName: "", //报告名称
        unitEstablishment: "", //编制单位
        reviewLink: "", //评审链接
        approvalLink: "", //审批链接
        textLinks: "", //文本链接
        remarks: "", //备注
      },
      //InformationVisible
      InformationVisible: false,
      //InformationDialogRules
      InformationDialogRules: {},
      //dialog表单
      safetyStandardsDialogForm: {
        certificateName: "", //证书名称
        licenseIssuingAuthority: "", //发证机关
        certificateLinks: "", //证书链接
        remarks: "", //备注
      },
      //dialog表单校验规则
      safetyStandardsDialogRules: {},
      //显示dialog
      safetyStandardsVisible: false,
      //安全生产标准信息填报
      safetyStandardsForm: {
        safetyStandardNumber: "", //安全生产标准化证书编号：
        safetyLevel: "", //安全生产标准化等级：
        validityPeriod: "", //有效期：
        safetyCertificate: "", //安全生产标准化证书:
        dateIssue: "", //发证日期
      },
      //安全生产标准信息填报校验
      safetyStandardsRules: {},
      //营业信息表
      businessForm: {
        username: "", //用户名
        password: "", //密码
        enterpriseName: "", //企业名称
        type: "", //所属类型
        phone: "", //联系人电话
        address: "", //单位地址
        industry: "", //所属行业
        socialCreditCode: "", //社会信用代码
        businessScope: "", //经营范围
        businessLicense: "", //营业执照
      },
      //营业信息表校验规则
      businessRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入所属类型", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
          {
            pattern: /^\d{1,11}$/,
            message: "联系人电话必须是数字且最多11位",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入单位地址", trigger: "blur" },
        ],
        industry: [
          { required: true, message: "请输入所属行业", trigger: "blur" },
        ],
        socialCreditCode: [
          { required: true, message: "请输入社会信用代码", trigger: "blur" },
        ],
        businessScope: [
          { required: true, message: "请输入经营范围", trigger: "blur" },
        ],
        businessLicense: [
          {
            validator: (rule, value, callback) => {
              console.log(this.businessForm.businessLicense);
              if (this.businessForm.businessLicense == "") {
                callback(new Error("请至少上传一个文件"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      //采矿信息表
      miningForm: {
        miningLicenseNumber: "", //采矿许可证证号
        miningSpecies: "", //开采矿种：
        miningMethod: "", //开采方式：
        productionScale: "", //生产规模 :
        miningArea: "", //矿区面积：
        maximumMiningElevation: "", //最高开采标高：
        minimumMiningElevation: "", //最低开采标高：
        validityPeriod: "", //有效期：
        miningLicense: "", //采矿许可证扫描件：
      },
      //采矿信息表校验规则
      miningFormRules: {},
      //安全生产表
      safetyProductionForm: {
        safetyProductionNumber: "", //安全生产许可证证号：
        principalName: "", //主要负责人姓名：
        principalNumber: "", //主要负责人联系电话：
        scopePermission: "", //许可范围
        productionScale: "", //生产规模：
        validityPeriod: "", //有效期：
        safetyPermit: "", //安全生产许可证：
      },
      //安全生产表校验
      safetyProductionRules: {},

      safetyTableData: [],
      InformationTableData: [],
      rules: [],
    };
  },

  methods: {
    //移除文件
    handleRemove() {
      this.businessForm.businessLicense = "";
      this.$refs.businessForm.validateField("businessLicense", () => {});
    },
    //获取文件上传返回值
    handleSuccess(res) {
      console.log(res);
      if (res.code == 0) {
        this.showbox = false;
        this.$notify({
          title: "成功",
          message: "上传成功",
          type: "success",
        });
        console.log(this.uploadType);
        if (this.uploadType == "1") {
          console.log("1");
          this.businessForm.businessLicense = "api/" + res.data[0];
          this.$refs.businessForm.validateField("businessLicense", () => {});
          console.log(this.businessForm.businessLicense);
        } else if (this.uploadType == "3") {
          this.safetyProductionForm.safetyPermit = "api/" + res.data[0];
        } else if (this.uploadType == "2") {
          this.miningForm.miningLicense = "api/" + res.data[0];
        } else if (this.uploadType == "4") {
          this.safetyStandardsForm.safetyCertificate = "api/" + res.data[0];
        }
      } else {
        this.$notify({
          title: "失败",
          message: "上传失败",
          type: "warning",
        });
      }
    },
    //更新表格注意这样才能动态更新
    // this.$set(
    //     this.InformationTableData,  table
    //     this.InformationDialogForm.index, index
    //     this.InformationDialogForm  data
    //   );
    //
    isEmpty(obj) {
      let allFieldsEmpty = Object.values(obj).every((value) => value === "");
      if (allFieldsEmpty) {
        return true;
      } else {
        return false;
      }
    },
    // async方法，用来执行表单验证和提交逻辑
    async register() {
      let formName = "businessForm";
      // 将validate方法的调用包装在一个新的Promise中
      try {
        const valid = await new Promise((resolve, reject) => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              resolve(valid);
            } else {
              reject(new Error("error submit!!"));
            }
          });
        });

        // 如果验证通过，则执行下一步逻辑
        if (valid) {
          let result = await businessInformation(this.businessForm);
          if (result.code == 1) {
            this.$notify({
              title: "失败",
              message: result.message,
              type: "warning",
            });
          }
          let enterpriseId = result.data;
          // 这里处理成功提交后的逻辑，比如跳转到其他页面或显示消息提示等
          console.log(result); // 假设这是你处理结果的代码
          if (result.code == 0) {
            //采矿信息
            //绑定起止时间

            if (!this.isEmpty(this.miningForm)) {
              this.miningForm.enterpriseId = enterpriseId;
              this.miningForm.validityPeriodStart =
                this.miningForm.validityPeriod[0];
              this.miningForm.validityPeriodEnd =
                this.miningForm.validityPeriod[1];
              result = await miningInformation(this.miningForm);
              if (result.code == 1) {
                this.$notify({
                  title: "失败",
                  message: result.message,
                  type: "warning",
                });
              } else {
                this.$notify({
                  title: "成功",
                  message: result.data,
                  type: "success",
                });
              }
            }

            //安全生产许可信息填报
            //绑定起止时间

            if (!this.isEmpty(this.safetyProductionForm)) {
              this.safetyProductionForm.enterpriseId = enterpriseId;
              this.safetyProductionForm.validityPeriodStart =
                this.safetyProductionForm.validityPeriod[0];
              this.safetyProductionForm.validityPeriodEnd =
                this.safetyProductionForm.validityPeriod[1];
              result = await safetyProductionInformation(
                this.safetyProductionForm
              );
              if (result.code == 1) {
                this.$notify({
                  title: "失败",
                  message: result.message,
                  type: "warning",
                });
              } else {
                this.$notify({
                  title: "成功",
                  message: result.data,
                  type: "success",
                });
              }
            }

            //安全生产标准信息填报
            //绑定起止时间
            if (!this.isEmpty(this.safetyStandardsForm)) {
              this.safetyStandardsForm.enterpriseId = enterpriseId;
              this.safetyStandardsForm.validityPeriodStart =
                this.safetyStandardsForm.validityPeriod[0];
              this.safetyStandardsForm.validityPeriodEnd =
                this.safetyStandardsForm.validityPeriod[1];
              result = await safetyStandardsInformation(
                this.safetyStandardsForm
              );
              this.safetyStandardsForm;
              if (result.code == 1) {
                this.$notify({
                  title: "失败",
                  message: result.message,
                  type: "warning",
                });
              } else {
                this.$notify({
                  title: "成功",
                  message: result.data,
                  type: "success",
                });
              }
            }

            //安全生产标准化证书信息填报
            if (this.safetyTableData.length != 0) {
              this.safetyTableData.map((item) => {
                item.enterpriseId = enterpriseId;
              });
              result = await safetyCertificateInformation(this.safetyTableData);
              if (result.code == 1) {
                this.$notify({
                  title: "失败",
                  message: result.message,
                  type: "warning",
                });
              } else {
                this.$notify({
                  title: "成功",
                  message: result.data,
                  type: "success",
                });
              }
            }

            //三同时信息填报
            if (this.InformationTableData.length != 0) {
              this.InformationTableData.map((item) => {
                item.enterpriseId = enterpriseId;
              });
              result = await thirdPartyInformation(this.InformationTableData);
              if (result.code == 1) {
                this.$notify({
                  title: "失败",
                  message: result.message,
                  type: "warning",
                });
              } else {
                this.$notify({
                  title: "成功",
                  message: result.data,
                  type: "success",
                });
              }
            }
            setTimeout(() => {
              this.$notify({
                title: "成功",
                message: "注册成功请登陆",
                type: "success",
              });
              this.$router.push("/login");
            }, 100);
          }
        }
      } catch (error) {
        // 如果验证失败或`businessInformation`调用出错，则在这里处理错误
        console.log(error.message || "An error occurred during submission.");
      }
    },
    // 注意：businessInformation函数应该是返回Promise的函数，可以是API调用
    editInformationRow(index) {
      this.InformationDialogForm = { ...this.InformationTableData[index] };
      this.InformationDialogForm.type = "edit";
      this.InformationDialogForm.index = index;
      this.InformationVisible = true;
    },
    //删除行 安全
    deleteInformationRow(index) {
      //dialog表单
      this.InformationDialogForm = {
        reportName: "", //报告名称
        unitEstablishment: "", //编制单位
        reviewLink: "", //评审链接
        approvalLink: "", //审批链接
        textLinks: "", //文本链接
        remarks: "", //备注
      };
      this.InformationTableData.splice(index, 1);
    },
    //确定新增三方资料
    submitInformation() {
      this.InformationVisible = false;

      if (this.InformationDialogForm.type === "edit") {
        this.$set(
          this.InformationTableData,
          this.InformationDialogForm.index,
          this.InformationDialogForm
        );
      } else {
        this.InformationTableData.push(this.InformationDialogForm);
      }
      //dialog表单
      this.InformationDialogForm = {
        reportName: "", //报告名称
        unitEstablishment: "", //编制单位
        reviewLink: "", //评审链接
        approvalLink: "", //审批链接
        textLinks: "", //文本链接
        remarks: "", //备注
      };
    },
    //编辑行 安全
    editSafetyRow(index) {
      this.safetyStandardsDialogForm = { ...this.safetyTableData[index] };
      this.safetyStandardsDialogForm.type = "edit";
      this.safetyStandardsDialogForm.index = index;
      this.safetyStandardsVisible = true;
    },
    //删除行 安全
    deleteSafetyRow(index) {
      //dialog表单
      this.safetyStandardsDialogForm = {
        certificateName: "", //证书名称
        licenseIssuingAuthority: "", //发证机关
        certificateLinks: "", //证书链接
        remarks: "", //备注
      };
      this.safetyTableData.splice(index, 1);
    },
    //新增安全
    submitSecurity() {
      this.safetyStandardsVisible = false;
      if (this.safetyStandardsDialogForm.type === "edit") {
        this.$set(
          this.safetyTableData,
          this.safetyStandardsDialogForm.index,
          this.safetyStandardsDialogForm
        );
      } else {
        this.safetyTableData.push({ ...this.safetyStandardsDialogForm });
      }
      //dialog表单
      this.safetyStandardsDialogForm = {
        certificateName: "", //证书名称
        licenseIssuingAuthority: "", //发证机关
        certificateLinks: "", //证书链接
        remarks: "", //备注
      };
      console.log(this.safetyStandardsDialogForm);
    },

    //测试提交
    async testSubmit() {
      console.log(businessInformation);
      console.log(miningInformation);
      console.log(safetyProductionInformation);
      console.log(safetyStandardsInformation);
      console.log(safetyCertificateInformation);
      console.log(thirdPartyInformation);
      // 营业信息
      // this.businessForm.businessLicense = "https";
      // this.businessForm.businessEnterpriseId = "1";
      // const result = await businessInformation(this.businessForm);
      // console.log(result);
      //
      //采矿信息
      // this.miningForm.miningEnterpriseId = "1";
      // console.log(this.miningForm);
      // this.miningForm.validityPeriodStart = this.miningForm.validityPeriod[0];
      // this.miningForm.validityPeriodEnd = this.miningForm.validityPeriod[1];
      // const result = await miningInformation(this.miningForm);
      // console.log(result);
      //
      //安全生产许可信息填报
      // this.safetyProductionForm.safetyProductionEnterpriseId = "1";
      // console.log(this.safetyProductionForm);
      // this.safetyProductionForm.validityPeriodStart =
      //   this.safetyProductionForm.validityPeriod[0];
      // this.safetyProductionForm.validityPeriodEnd =
      //   this.safetyProductionForm.validityPeriod[1];
      // const result = await safetyProductionInformation(
      //   this.safetyProductionForm
      // );
      // console.log(result);
      //安全生产标准信息填报
      // this.safetyStandardsForm.safetyStandardsEnterpriseId = "1";
      // console.log(this.safetyStandardsForm);
      // this.safetyStandardsForm.validityPeriodStart =
      //   this.safetyStandardsForm.validityPeriod[0];
      // this.safetyStandardsForm.validityPeriodEnd =
      //   this.safetyStandardsForm.validityPeriod[1];
      // const result = await safetyStandardsInformation(this.safetyStandardsForm);
      // console.log(result);
      //安全生产标准化证书信息填报

      // console.log(this.safetyTableData);
      // const result = await safetyCertificateInformation(this.safetyTableData);
      // console.log(result);
      //
      console.log(this.InformationTableData);
      const result = await thirdPartyInformation(this.InformationTableData);
      console.log(result);
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner {
  width: 240px;
}

:deep(.el-input__inner) {
  height: auto !important;
}
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }

// :deep(.el-collapse-item__header) {
//   font-weight: bold;
//   color: #333;
//   font-size: 15px;
//   padding: 0 10px;
// }
// :deep(.el-icon-arrow-right:before) {
//   font-weight: bold;
//   color: #333;
//   font-size: 25px;
// }
body {
  min-height: 100vh;

  transition: all 0.3s ease;
}
.container {
  height: 100%;
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 6px 15px;

  .item-content {
    margin-bottom: 20px;

    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}

.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>
